<script setup lang="ts">
import { reactive, ref } from 'vue';
import {setFieldTemplate} from "@/apis/order"
import { onLoad, onShow } from '@dcloudio/uni-app'
import constant from "@/utils/constant"
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const form = reactive({
	cargoName:'',
	orderName: "", 
	cargoTypeId: "",
	cargoGrossWeight: "",
	classificationGoods:''
}) 
const centon = reactive({
	projectId:'',
	totalAmount:'',
	frequency:'',
	result:'',
	resultPic:'',
})
const loading = ref(true)
onLoad((e: AnyObject | undefined)=>{ 
	if(e === undefined) return
	 const data = JSON.parse(e.data)
	 form.orderName = data.name
	 form.cargoTypeId = data.typeName
	 form.cargoName = data.cargoName
	 form.classificationGoods = data.cargoTypeId
	 form.cargoGrossWeight = data.cargoGrossWeight
	 centon.projectId = data.id
	 loading.value = false
})
const formRef = ref()
const image = reactive<any>([])
const rules = {
	totalAmount: {require: true, message: "必须填写施用总量", trigger: ['change','blur']},
	frequency: {require: true, message: "必须填写施用频次", trigger: ['change','blur']},
	result: {require: true, message: "必须填写施用效果", trigger: ['change','blur']},
	resultPic: {require: true, message: "必须上传效果图片", trigger: ['change','blur']},
}

	
function submit(){
	formRef.value.validate().then(res => {
		setFieldTemplate(centon).then(()=> {
			uni.hideLoading()
			uni.showToast({
				title:"提交成功",
				icon: "success"
			})
			uni.navigateTo({
				url:"../../pages/order/orderInfo"
			})
		})
})
}
// onShow((e)=>{
// 	console.log(1233)
// })
async function afterRead(event){
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	const lists: any = [].concat(event.file);
	let fileListLen = image.length;
	lists.forEach((item: any) => {
	image.push({
	    ...item,
	    status: 'uploading',
		message: '上传中',
		});
	});
	for (let i = 0; i < lists.length; i++) {
		const result = await uploadFilePromise(lists[i].url);
		const item = image[fileListLen];
		image.splice(fileListLen, 1, {
			...item,
			status: 'success',
			message: '',
			url: result,
		});
		centon.resultPic = JSON.parse(result as string).data
		fileListLen++;
	}
};

function uploadFilePromise(url){
	return new Promise((resolve) => {
		uni.uploadFile({
			url: constant.uploadUrl, // 仅为示例，非真实的接口地址
			filePath: url,
			name: 'file',
			header: {
				Authorization: userStore.token
			},
			formData: {
			},
			success: (res: any) => {
				setTimeout(() => {
					resolve(res.data);
				}, 1000)
			}
	    });
	});
};

function deletePic(event){
  image.splice(event.index, 1);
  centon.resultPic = ""
}

</script>

<template>
	<u-loading-page :loading="loading"/>
	<view v-if="!loading" style="padding: 10px 20px">
		<u-form :model="form" ref="formRef" :rules="rules" >
			<u-form-item prop="orderName" label="订单名称" borderBottom label-width="100">
				<u-input v-model="form.orderName" border="none" placeholder="订单名称" height="140" :disabled="true"/>
			</u-form-item>
			<u-form-item prop="" label="订单类型" borderBottom label-width="100">
				<u-input v-model="form.cargoTypeId" border="none" placeholder="订单类型" height="140" :disabled="true"/>
			</u-form-item>
			<u-form-item prop="cargoName" label="货物名称" borderBottom label-width="100">
				<u-input v-model="form.cargoName" border="none" placeholder="货物名称" height="140" :disabled="true"/>
			</u-form-item>
			<u-form-item prop="classificationGoods" label="货物分类" borderBottom label-width="100">
				<u-input v-model="form.classificationGoods" border="none" placeholder="货物分类" height="140" :disabled="true"/>
			</u-form-item>
			<u-form-item prop="cargoGrossWeight" label="货物毛重" borderBottom label-width="100">
				<u-input v-model="form.cargoGrossWeight" border="none" placeholder="货物毛重" height="140" :disabled="true"/>
			</u-form-item>
			<u-form-item prop="totalAmount" label="施用总量" borderBottom label-width="100" :required="true">
				<u-input v-model="centon.totalAmount" border="none" placeholder="施用总量" height="140"/>
			</u-form-item>
			<u-form-item prop="frequency" label="施用频次" borderBottom label-width="100" :required="true">
				<u-input v-model="centon.frequency" border="none" placeholder="施用频次" height="140" />
			</u-form-item>
			<u-form-item prop="result" label="施用效果" borderBottom label-width="100" :required="true">
				<u-input v-model="centon.result" border="none" placeholder="施用效果" height="140"/>
			</u-form-item>
			<u-form-item prop="resultPic" label="效果图片" borderBottom label-width="100" :required="true">
			<u-upload
					:fileList="image"
					@afterRead="afterRead"
					@delete="deletePic"
					name="1"
					multiple 
					:maxCount="1"
				/>
			</u-form-item>
		</u-form>
		<u-button type="primary" @click="submit">提交</u-button>
	</view>
</template>

<style lang="scss">
	.width{
		width: 100rpx;
		height: 100rpx;
	}
.form {
	  margin: 0rpx 10rpx ;
	  // padding: 0 20rpx;
	  border-radius: 10rpx;
	  background-color: #fff;
	  &-item {
	    display: flex;
	    height: 46rpx;
	    // line-height: 86rpx;
	    padding: 10rpx 10rpx;
	    background-color: #fff;
	    font-size: 28rpx;
	    // border-bottom: 1rpx solid #ddd;
	    .label {
	      width: 250rpx;
		  text-align: right;
		  margin-right: 20rpx;
	      color: #333;
	    }
	
	
	  .form-item:last-child {
	    border: none;
	  }
	}
	}
</style>
